<template>
    <div class="w-full">
        <div class="min-h-screen flex items-center justify-center">
            <div class="bg-white w-full rounded   transition duration-500 p-10">
                <div class=" rounded text-3xl items-center justify-center font-bold text-gray-800">{{ form.article }}</div>
                <div class="mt-4">
                    <h1 class="text-lg text-gray-700 font-semibold hover:underline">{{ form.title }}</h1>
                    <div class="grid grid-cols-3 gap-2 ">
                        <div class="col-span-2">
                            <p class="mt-4 text-md text-gray-600 p-2" v-markdown v-html="form.content"></p>
                        </div>
                        <div class="col-span-1  text-center  text-2xl text-red-600 font-bold h-full ">
                            <div class="flex justify-center items-center text-center  h-full">
                                <span v-if="form.price">  价格：{{ form.price }} </span>
                                <span v-else> 价格：面议 </span>
                            </div>
                        </div>
                    </div>
                    <h4 class="text-2xl text-blue-800 my-2">图片信息</h4>
                    <div class="flex">
                        <div v-for="(image,index) in form.images" class="flex w-32 h-32 border-blue-200 shadow mx-3">
                            <a :href="image.url" target="_blank">
                                <img :src="image.url" alt="">
                            </a>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="mt-4 flex items-center space-x-4 py-6">
                            <div class="text-sm font-semibold">
                                    <span class="font-normal">
                                        发布时间：{{ form.created_at|dateFormat() }}
                                    </span>
                            </div>
                            <div class="text-sm font-semibold" v-if="form.source">
                                    <span class="font-normal">
                                        来源： {{ form.source }}
                                    </span>
                            </div>
                            <div class="text-sm font-semibold" v-else>
                                    <span class="font-normal">
                                        来源： 管理员
                                    </span>
                            </div>
                            <div class="text-sm font-semibold" v-if="form.author">
                                    <span class="font-normal">
                                        发布人： {{ form.author }}
                                    </span>
                            </div>
                            <div class="text-sm font-semibold" v-else>
                                    <span class="font-normal">
                                        发布人： 系统
                                    </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        预览图区域-->

    </div>
</template>

<script>
export default {
    route: {path: 'used/:id/show'},
    data() {
        return {
            id: this.$route.params.id,
            form: {}
        }
    },
    async created() {
        this.form = await this.axios.get(`article/2/used/${this.$route.params.id}`);
    },
}
</script>

<style scoped>

</style>
